<template>
    <div class="tabPanel">
        <div class="item">
            <div class="menutitle" @click="toggleG">
                <div class="iconParent">
                    <text class="icon" :style="{fontFamily: 'wxcIconFont'}">{{iconArr[1]}}</text>
                </div>
                <text class="text">燃气能效监测能耗与气温关系统计表</text>
            </div>
            <div class="sildermun" v-if="statusG">
                <ul class="list">
                    <li class="listItem">
                        <text class="textTitle">所属行政区划:</text>
                        <scroller class="input" scroll-direction="horizontal" @click="divisionG">
                            <text class="inpText">{{divisionDataG}}</text>
                        </scroller>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">厂家:</text>
                        <div class="input" @click="factorG">
                            <text class="inpText">{{factorDataG}}</text>
                        </div>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">供气企业:</text>
                        <div class="input" @click="gasSupply">
                            <text class="inpText">{{supplyDataG}}</text>
                        </div>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">查询时间:</text>
                        <div class="timeBar">
                            <text class="bgTime time" @click="sTime">{{bgTime}}{{data}}</text>
                            <text class="time">至</text>
                            <text class="edTime time" @click="eTime">{{edTime}}</text>
                        </div>
                    </li>
                    <li class="listItems">
                        <button class="btn" @click="queryG"><text class="btnText">查询</text></button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="menutitle" @click="toggleE">
                <div class="iconParent">
                    <text class="icon" :style="{fontFamily: 'wxcIconFont'}">{{iconArr[1]}}</text>
                </div>
                <text class="text">能效监测设备能耗对比分析统计表</text>
            </div>
            <div class="sildermun" v-if="statusE">
                <ul class="list">
                    <li class="listItem">
                        <text class="textTitle">所属行政区划:</text>
                        <scroller class="input" scroll-direction="horizontal" @click="divisionE">
                            <text class="inpText">{{divisionDataE}}</text>
                        </scroller>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">查询时间:</text>
                        <div class="timeBar">
                            <text class="bgTime time" @click="sTimeE">{{bgTimeE}}</text>
                            <text class="time">至</text>
                            <text class="edTime time" @click="eTimeE">{{edTimeE}}</text>
                        </div>
                    </li>
                    <li class="listItems">
                        <button class="btn" @click="queryE"><text class="btnText">查询</text></button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="menutitle" @click="toggleA">
                <div class="iconParent">
                    <text class="icon" :style="{fontFamily: 'wxcIconFont'}">{{iconArr[1]}}</text>
                </div>
                <text class="text">空气源热泵能效监测能耗与气温关系统计表</text>
            </div>
            <div class="sildermun" v-if="statusA">
                <ul class="list">
                    <li class="listItem">
                        <text class="textTitle">所属行政区划:</text>
                        <scroller class="input" scroll-direction="horizontal" @click="divisionA">
                            <text class="inpText">{{divisionDataA}}</text>
                        </scroller>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">厂家:</text>
                        <div class="input" @click="factorA">
                            <text class="inpText">{{factorDataA}}</text>
                        </div>
                    </li>
                    <li class="listItem">
                        <text class="textTitle">查询时间:</text>
                        <div class="timeBar">
                            <text class="bgTime time" @click="sTimeA">{{bgTimeA}}</text>
                            <text class="time">至</text>
                            <text class="edTime time" @click="eTimeA">{{edTimeA}}</text>
                        </div>
                    </li>
                    <li class="listItems">
                        <button class="btn" @click="queryA"><text class="btnText">查询</text></button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import { addIconFontSupport } from '@/config/iconConfig.js';
import Config from '@/config/runIconConfig.js';
const dom = weex.requireModule('dom');
const picker = weex.requireModule('picker');
export default {
    name: 'energyEfficiency',
    data (){
        return {
            iconArr: Config.operationIcon,
            statusG: true,
            statusE: false,
            statusA: false,
            bgTime: '',
            edTime: '',
            bgTimeE: '',
            edTimeE: '',
            bgTimeA: '',
            edTimeA: '',
            supplyDataG: '请输入供气企业',
            factorDataG: '厂家',
            divisionDataG: '请输入所属行政区划',
            divisionDataE: '请输入所属行政区划',
            factorDataA: '厂家',
            divisionDataA: '请输入所属行政区划',
            factorGdm: '',
            factorAdm: '',
            quyxzqhdm : '',
            XZQHDM: []
        }
    },
    beforeCreate() {
        this.$notice.loading.show()
        this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created(){
        addIconFontSupport(dom, "../../");
        this.year = new Date().getFullYear()
        this.month = new Date().getMonth()
        this.nextMonth = this.month + 1
        this.day = new Date().getDate()
        if(this.month < 10 || this.nextMonth < 10) {
            this.month = '0' + this.month
            this.nextMonth = '0' + this.nextMonth
        }
        if(this.day < 10){
            this.day = '0' + this.day
        }
        this.bgTime = this.year + '-' + this.month + '-' + this.day
        this.edTime = this.year + '-' + this.nextMonth + '-' + this.day
        this.bgTimeE = this.year + '-' + this.month + '-' + this.day
        this.edTimeE = this.year + '-' + this.nextMonth + '-' + this.day
        this.bgTimeA = this.year + '-' + this.month + '-' + this.day
        this.edTimeA = this.year + '-' + this.nextMonth + '-' + this.day
    },
    mounted () {
        this.$notice.loading.hide()
    },
    methods: {
        toggleG(){
            this.statusG = !this.statusG;
            this.statusE = false;
            this.statusA = false;
        },
        toggleE(){
            this.statusE = !this.statusE;
            this.statusA = false;
            this.statusG = false;
        },
        toggleA(){
            this.statusA = !this.statusA;
            this.statusG = false;
            this.statusE = false;
        },
        sTime(){
            picker.pickDate({
                value: this.bgTime
            }, e => {
                if (e.result === 'success') {
                    this.bgTime = e.data
                }
            })
        },
        eTime(){
            picker.pickDate({
                value: this.edTime
            }, e => {
                if (e.result === 'success') {
                    this.edTime = e.data
                }
            })
        },
        sTimeE(){
            picker.pickDate({
                value: this.bgTimeE
            }, e => {
                if (e.result === 'success') {
                    this.bgTimeE = e.data
                }
            })
        },
        eTimeE(){
            picker.pickDate({
                value: this.edTimeE
            }, e => {
                if (e.result === 'success') {
                    this.edTimeE = e.data
                }
            })
        },
        sTimeA(){
            picker.pickDate({
                value: this.bgTimeA
            }, e => {
                if (e.result === 'success') {
                    this.bgTimeA = e.data
                }
            })
        },
        eTimeA(){
            picker.pickDate({
                value: this.edTimeA
            }, e => {
                if (e.result === 'success') {
                    this.edTimeA = e.data
                }
            })
        },
        queryG(){
            this.$router.open({
                name: 'gasDetail',
                params: {
                    quyxzqhdm: this.quyxzqhdm,
                    T0JHSJMIN: this.bgTime,
                    T0JHSJMAX: this.edTime,
                    T0GSDM: this.factorGdm
                }
            })
        },
        queryE(){
            this.$router.open({
                name: 'energyDetail',
                params: {
                    quyxzqhdm: this.quyxzqhdm,
                    T0JHSJMIN: this.bgTimeE,
                    T0JHSJMAX: this.edTimeE,
                    T0GSDM: ''
                }
            })
        },
        queryA(){
            this.$router.open({
                name: 'airDetail',
                params: {
                    quyxzqhdm: this.quyxzqhdm,
                    T0JHSJMIN: this.bgTimeA,
                    T0JHSJMAX: this.edTimeA,
                    T0GSDM: this.factorAdm
                }
            })
        },
        divisionG(){
            if(this.divisionDataG == '' || this.divisionDataG == '请输入所属行政区划'){
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionG'
                    }
                })
            } else {
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionG',
                        data: this.divisionDataG,
                        dm: this.quyxzqhdm,
                        XZQHDM: this.XZQHDM
                    }
                })
            }
        },
        divisionE(){
            if(this.divisionDataE == '' || this.divisionDataE == '请输入所属行政区划'){
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionE'
                    }
                })
            } else {
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionE',
                        data: this.divisionDataE,
                        dm: this.quyxzqhdm,
                        XZQHDM: this.XZQHDM
                    }
                })
            }
        },
        divisionA(){
            if(this.divisionDataA == '' || this.divisionDataA == '请输入所属行政区划'){
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionA'
                    }
                })
            } else {
                this.$router.open({
                    name: 'divisionG',
                    params: {
                        name: 'divisionA',
                        data: this.divisionDataA,
                        dm: this.quyxzqhdm,
                        XZQHDM: this.XZQHDM
                    }
                })
            }
        },
        factorG(){
            this.$router.open({
                name: 'factorG',
                params: {
                    name: 'factorG'
                }
            })
        },
        factorA(){
            this.$router.open({
                name: 'factorG',
                params: {
                    name: 'factorA'
                }
            })
        },
        gasSupply(){
            this.$router.open({
                name: 'gasSupply',
                params: {
                    name: 'supply'
                }
            })
        }
    },
    eros: {
        beforeBackAppear (params) {
            if(params.name === 'factorA') {
                this.factorDataA = params.data
                this.factorAdm = params.dm
            } else if(params.name === 'factorG'){
                this.factorDataG = params.data
                this.factorGdm = params.dm
            }
            if(params.name === 'divisionG') {
                this.divisionDataG = params.data.join(' ')
                this.quyxzqhdm = params.xzqhdm
                this.XZQHDM = params.XZQHDM
            } else if(params.name === 'divisionE') {
                this.divisionDataE = params.data.join(' ')
                this.quyxzqhdm = params.xzqhdm
                this.XZQHDM = params.XZQHDM
            } else if(params.name === 'divisionA') {
                this.divisionDataA = params.data.join(' ')
                this.quyxzqhdm = params.xzqhdm
                this.XZQHDM = params.XZQHDM
            }
            if(params.name == 'supply') {
                this.supplyDataG = params.value
            }
        }
    }
}
</script>
<style scoped>
.tabPanel{
    width: 750px;
}
.item{
    width: 750px;
}
.menutitle{
    width: 750px;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color:rgba(238,238,238,1);
    margin-bottom: 15px;
}
.iconParent{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 15px;
    margin-right: 15px;
    justify-content: center;
    align-items: center;
}
.icon{
    font-size: 30px;
    color: rgba(62,175,252,1);
}
.text{
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
}
.sildermun{
    width: 750px;
}
.list{
    width: 750px;
    padding-left: 15px;
    padding-right: 15px;
}
.listItem{
    width: 720px;
    height: 100px;
    border-bottom-color: #ccc;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.listItems{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.btn{
    width: 285px;
    height: 60px;
    border-radius: 10px;
    background-color: rgba(62,175,252,1);
    justify-content: center;
    align-items: center;
}
.btnText{
    color: #fff;
    font-size: 28px;
    font-family:PingFangSC-Regular;
}
.textTitle{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.timeBar{
    width: 550px;
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.time{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.bgTime{
    display: inline-block;
    width: 225px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}
.edTime{
    display: inline-block;
    width: 225px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}
.input{
    width: 550px;
    height: 80px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.inpText{
    display: inline-block;
    width: 550px;
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(204,204,204,1);
}
</style>
